{% extends "../main.html" %}
{% block head_js %}
<script src="{{ static_url('echarts/2-2-7/build/dist/echarts.js')}}"></script>
<!--<script src="{{ static_url('echarts/3/echarts.common.min.js')}}"></script>-->
<META HTTP-EQUIV="Refresh" CONTENT="120">
{% end %}

{% block bodyy %}
<h3 class="sub-header">访问统计</h3>
<div id="total_number" style="height:400px;"></div>
<h2 class="sub-header"></h2>

<div id="status" style="height:400px;"></div>
<h2 class="sub-header"></h2>

<div id="ie" style="height:400px;"></div>
<h2 class="sub-header"></h2>

<script type="text/javascript">
require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
            ],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('total_number'));

option = {
title : {
text: 'nginx访问总数',
//subtext: 'nginx访问次数2',
// x: 'center'
},
tooltip : {
trigger: 'axis',
formatter: function(params) {
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value + ' (个)<br/>'
}
},
legend: {
data:['访问总数'],
//  x: 'left'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true},

}
},
dataZoom : {
show : true,
realtime : true,
start : 60,
end : 100
},
xAxis : [
{
type : 'category',
boundaryGap : false,
axisLine: {onZero: false},
data :{% raw tms %},
splitLine:{show: false},

}
],
yAxis : [
{
name : '访问次数',
type : 'value',
// max : 150
splitLine:{show: false},
}
],

series : [
{
name:'访问总数',
type:'line',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:{{[i for  i in total_number]}}
}
]
};


// 为echarts对象加载数据
myChart.setOption(option);
}
);

</script>


<script type="text/javascript">
        require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                 'echarts/chart/tree'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('status'));

 option = {
    title : {
        text: '状态码和post、get每日统计',
        //subtext: '纯属虚构',
        //x:'center'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['200状态码','304状态码','404状态码','post','get']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    //calculable : true,
        dataZoom : {
        show : true,
        realtime : true,
        start : 60,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : {% raw tms %},
            splitLine:{show: false},
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                //formatter: '{value} °C'
                formatter: '{value}'
            },
            //splitLine:{show: false},
        }
    ],
    series : [
        {
            name:'post',
            type:'line',
            data:{{[ i[1][0] for i in data]}},

        },
        {
            name:'get',
            type:'line',
            data:{{[ i[1][1] for i in data]}},

        },
        {
            name:'200状态码',
            type:'line',
            data:{{[ i[1][2] for i in data]}},

        },
        {
            name:'304状态码',
            type:'line',
            data:{{[ i[1][3] for i in data]}},

        },
        {
            name:'404状态码',
            type:'line',
            data:{{[ i[1][4] for i in data]}},
        }
    ]
};



                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );


</script>

<script type="text/javascript">
        require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                 'echarts/chart/tree'

            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('ie'));

 option = {
    title : {
        text: '[IE、Firefox、Chrome]访问次数',
        //subtext: '纯属虚构',
        //x:'center'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['IE','Firefox','Chrome']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    //calculable : true,
        dataZoom : {
        show : true,
        realtime : true,
        start : 60,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : {% raw tms %},
            splitLine:{show: false},
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                //formatter: '{value} °C'
                formatter: '{value}'
            },
            //splitLine:{show: false},
        }
    ],
    series : [
        {
            name:'IE',
            type:'line',
            data:{{[ i[1][5] for i in data]}},

        },
        {
            name:'Firefox',
            type:'line',
            data:{{[ i[1][6] for i in data]}},

        },
        {
            name:'Chrome',
            type:'line',
            data:{{[ i[1][7] for i in data]}},
        }
    ]
};



                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );


</script>


{% end %}
